﻿@using Masa.Stack.Components
@inherits AdminCompontentBase

<AutoHeight Card CardClass="pl-6 pr-2 py-0">
    <HeaderContent>
        <div class="d-flex">
            <MSpacer />
            <div>
                <SUserAutoComplete Small FillBackground=false @bind-Value="UserId" Class="user-auto-complete" />
            </div>
            <div @onclick="() => Filter = !(Filter ?? false)" class="ml-4 block-center justify-center button white">
                <SIcon Class="ma-auto" Color="emphasis2" Size=20 Tooltip="@(Filter is true ? T("Cancel Filter"): T("Filter"))">
                    @(Filter is true ? IconConstants.FilterOff : IconConstants.Filter)
                </SIcon>
            </div>
            <SButton Small Class="ml-4" OnClick=OpenAddUserDialog BorderRadiusClass="rounded-lg">
                <SIcon Size=18 IsDefaultToolTip=false>@IconConstants.Add</SIcon>
                <span class="ml-2 btn">@T("Add")</span>
            </SButton>
        </div>
        <div id="userFilter" class="@FilterClass">
            <SDateRangePicker @bind-StartTime=StartTime @bind-EndTime=EndTime />
            <MRow Class="ml-6">
                <MCol Md=4>
                    <BooleanSelect @bind-Value="Enabled" FillBackground=false AutoLabel=false Small Placeholder="@T("UserState")" />
                </MCol>
            </MRow>
        </div>
    </HeaderContent>
    <AutoHeightContent>
        <SDataTable Dense
                    FixedHeader="true"
                    Headers="@_headers"
                    Height="@(Filter is true ? "calc(100vh - 325px)" : "calc(100vh - 260px)")"
                    Items="Users"
                    TItem="UserDto"
                    ItemsPerPage="PageSize"
                    Class="mr-2">
            <HeaderColContent Context="header">
                <span>@header.Text</span>
            </HeaderColContent>
            <ItemColContent>
                @switch (context.Header.Value)
                {
                    case nameof(UserDto.Avatar):
                        <div class="hover-pointer d-flex" @onclick="()=> OpenUpdateUserDialog(context.Item)">
                            <MAvatar Size="40">
                                <img src="@context.Item.Avatar" />
                            </MAvatar>
                            <div class="ml-2 my-auto">
                                <div>@ReturnNotNullValue(context.Item.DisplayName,context.Item.Name,context.Item.Account)</div>
                                <div class="regular2--text caption">@context.Item.PhoneNumber</div>
                            </div>
                        </div>
                        break;
                    case (nameof(UserDto.Account)):
                        <span>@context.Item.Account</span>
                        break;
                    case (nameof(UserDto.CreationTime)):
                        <SDateTimeTitle Value=context.Item.CreationTime />
                        break;
                    case nameof(UserDto.Enabled):
                        <EnableChip Value=context.Item.Enabled />
                        break;
                    case "Action":
                        <div class="d-flex">
                            <MButton Icon OnClick="()=> OpenUpdateUserDialog(context.Item)">
                                <SIcon Tooltip="@T("Edit")">@IconConstants.Update</SIcon>
                            </MButton>
                            <MButton Class="mx-4" Icon OnClick="async ()=> await _userAuthorizeDialog.ShowAsync(context.Item.Id)">
                                <SIcon Tooltip="@T("Authorize")">@IconConstants.Authorize</SIcon>
                            </MButton>
                            <MButton Icon OnClick="async ()=> await _userClaimsDialog.ShowAsync(context.Item.Id)">
                                <SIcon Tooltip="@T("Claim")">@IconConstants.Claim</SIcon>
                            </MButton>
                        </div>
                        break;
                    default:
                        <SItemCol Value="@context.Value" />
                        break;
                }
            </ItemColContent>
        </SDataTable>
    </AutoHeightContent>
    <FooterContent>
        <SPagination Class="mt-4" @bind-Page="Page" @bind-PageSize=PageSize Total=Total />
    </FooterContent>
</AutoHeight>
<AddUserDialog @bind-Visible="AddUserDialogVisible" OnSubmitSuccess=OnAddUserSuccessAsync />
<UpdateUserDialog UserId=CurrentUserId @bind-Visible="UpdateUserDialogVisible" OnSubmitSuccess=UpdateStaffAndThirdPartyUserAsync />
<UserAuthorizeDialog @ref="_userAuthorizeDialog" OnSubmitSuccess=GetUserAsync />
<UserClaimsDialog @ref="_userClaimsDialog" />